<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS float 浮动学习</title>
</head>
<body>
  <p>示例1</p>
  <style>
    section {
      box-sizing: border-box;
      border: 1px solid blue;
      width: 100%;
      float: left;
    }

    div {
      margin: 5px;
      width: 50px;
      height: 150px;
    }

    .left {
      float: left;
      background: pink;
    }

    .right {
      float: right;
      background: cyan;
    }
  </style>
  
  <section>
    <div class="left">one</div>
    <div class="left">two</div>
    <div class="right">three</div>
    <p>
      <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
    </p>
  </section>

  <p>示例2</p>
  <style>
  .box {
    width: 150px;
    height: 100px;
    float: left;
    padding: 1em;
    margin-top: 30px;
    margin-right: 15px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
  }
  .special {
    background-color: rgb(79, 185, 227);
    padding: 10px;
    color: #fff;
  }
  </style>
  <h3>文章标题</h3>
  <section>
    <div class="box">one Float</div>
    <p class="special">
      <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
    </p>
    <p>
      本人现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
    </p>
  </section>

  <p>示例3</p>
  <style>
    .clear {
      content: ""; 
      clear: both;
      display: block;
    }
  </style>
    <section>
      <div class="box">one Float</div>
      <p class="special clear">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
      <p>
        本人现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
      </p>
    </section>
</body>
</html>
